<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
	<th:block th:include="include :: header('修改用户头像')" />
	<th:block th:include="include :: cropper-css" />
	<style type='text/css'>
		/* avator css start */
		.container {
			margin: 10px 5px 5px 5px;
		}

		.action {
			padding: 5px 0px;
		}

		.cropped {
			width: 200px;
			border: 1px #ddd solid;
			box-shadow: 0px 0px 12px #ddd;
		}

		.img-preview {
			border-radius: 50%;
			box-shadow: 0px 0px 12px #7e7e7e;
			display: inline-block;
		}

		.preview-box {
			text-align: center;
			margin: 0px auto;
			margin-top: 10px;
			color: #bbb;
		}

		.preview-md {
			width: 128px;
			height: 128px;
		}

		.preview-sm {
			width: 96px;
			height: 96px;
		}

		.preview-xs {
			width: 64px;
			height: 64px;
		}

		.imageBox {
			border: 1px solid #aaa;
			overflow: hidden;
			cursor: move;
			box-shadow: 4px 4px 12px #B0B0B0;
			margin: 0px auto;
		}

		.btn-custom {
			float: right;
			width: 46px;
			display: inline-block;
			margin-bottom: 10px;
			height: 37px;
			line-height: 37px;
			font-size: 14px;
			color: #FFFFFF;
			margin: 0px 2px;
			background-color: #f38e81;
			border-radius: 3px;
			text-decoration: none;
			cursor: pointer;
			box-shadow: 0px 0px 5px #B0B0B0;
			border: 0px #fff solid;
		}
		/*选择文件上传*/
		.new-contentarea {
			width: 165px;
			overflow: hidden;
			margin: 0 auto;
			position: relative;
			float: left;
		}

		.new-contentarea label {
			width: 100%;
			height: 100%;
			display: block;
		}

		.new-contentarea input[type=file] {
			width: 188px;
			height: 60px;
			background: #333;
			margin: 0 auto;
			position: absolute;
			right: 50%;
			margin-right: -94px;
			top: 0;
			right/*\**/: 0px\9;
			margin-right/*\**/: 0px\9;
			width/*\**/: 10px\9;
			opacity: 0;
			filter: alpha(opacity=0);
			z-index: 2;
		}

		a.upload-img {
			width: 165px;
			display: inline-block;
			margin-bottom: 10px;
			height: 37px;
			line-height: 37px;
			font-size: 14px;
			color: #FFFFFF;
			background-color: #f38e81;
			border-radius: 3px;
			text-decoration: none;
			cursor: pointer;
			border: 0px #fff solid;
			box-shadow: 0px 0px 5px #B0B0B0;
		}

		a.upload-img:hover {
			background-color: #ec7e70;
		}

		.tc {
			text-align: center;
		}
		/* avator css end */
	</style>
</head>
<body class="white-bg">
<div class="row container">
	<div class="col-md-10">
		<div class="imageBox">
			<img id="avatar" th:src="(${#strings.isEmpty(user.avatar)}) ? @{/img/profile.jpg} : @{${user.avatar}}" th:onerror="'this.src=\'' + @{'/img/profile.jpg'} + '\''">
		</div>
		<div class="action">
			<div class="new-contentarea tc">
				<a href="javascript:void(0)" class="upload-img"><label for="inputImage">上传图像</label> </a>
				<input type="file" name="avatar" id="inputImage" accept="image/*"/>
			</div>
			<button type="button" class="btn-custom" data-method="zoom" data-option="0.1"><i class="fa fa-search-plus"></i></button>
			<button type="button" class="btn-custom" data-method="zoom" data-option="-0.1"><i class="fa fa-search-minus"></i></button>
			<button type="button" class="btn-custom" data-method="rotate" data-option="-45"><i class="fa fa-rotate-left"></i></button>
			<button type="button" class="btn-custom" data-method="rotate" data-option="45"><i class="fa fa-rotate-right"></i></button>
			<button type="button" class="btn-custom" data-method="scaleX" data-option="-1"><i class="fa fa-arrows-h"></i></button>
			<button type="button" class="btn-custom" data-method="scaleY" data-option="-1"><i class="fa fa-arrows-v"></i></button>
			<button type="button" class="btn-custom" data-method="reset"><i class="fa fa-refresh"></i></button>
		</div>
	</div>
	<div class="col-md-2">
		<div class="cropped">
			<div class="preview-box">
				<div class="img-preview preview-xs"></div>
			</div>
			<div class="preview-box">
				<div class="img-preview preview-sm"></div>
			</div>
			<div class="preview-box">
				<div class="img-preview preview-md"></div>
			</div>
		</div>
	</div>
</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: cropper-js" />
<script type="text/javascript">
    var cropper;
    var croppable = false;
    $(window).load(function() {
        var image = document.getElementById('avatar');
        cropper = new Cropper(image, {
            aspectRatio: 1,
            viewMode: 1,
            autoCropArea: 0.9,
            preview: '.img-preview',
            ready: function () {
                croppable = true;
            }
        })

        $('#inputImage').on('change', function() {
            var reader = new FileReader();
            var file = $('#inputImage')[0].files[0];
            if (/^image\/\w+$/.test(file.type)) {
                reader.onload = function(e) {
                    if(croppable){
                        cropper.replace(e.target.result)
                    }
                }
                reader.readAsDataURL(this.files[0]);
            } else {
                $.modal.alertWarning('请选择一个图片文件。');
            }
        });

        $('.btn-custom').on('click',function (e) {
            if (!croppable) {
                $.modal.alertWarning("裁剪框加载中,请稍后...");
                return;
            }
            var data = {
                method: $(this).data('method'),
                option: $(this).data('option') || undefined,
            };
            var result = cropper[data.method](data.option, data.secondOption);
            if(['scaleX','scaleY'].indexOf(data.method) !== -1){
                $(this).data('option', -data.option)
            }
        })
    });

    function submitHandler() {
        if (!croppable) {
            $.modal.alertWarning("裁剪框加载中,请稍后...");
            return
        }
        cropper.getCroppedCanvas().toBlob(function(img) {
            var formdata = new FormData();
            formdata.append("avatarfile", img);
            $.ajax({
                url: ctx + "system/user/profile/updateAvatar",
                data: formdata,
                type: "post",
                processData: false,
                contentType: false,
                success: function(result) {
                    $.operate.saveSuccess(result);
                }
            })
        });
    }

    $(window).resize(function() {
        $('.imageBox').height($(window).height() - 80);
        $('.cropped').height($(window).height() - 40);
    }).resize();

    if (!HTMLCanvasElement.prototype.toBlob) {
        Object.defineProperty(HTMLCanvasElement.prototype, 'toBlob', {
            value: function(callback, type, quality) {
                var canvas = this;
                setTimeout(function() {
                    var binStr = atob(canvas.toDataURL(type, quality).split(',')[1]);
                    var len = binStr.length;
                    var arr = new Uint8Array(len);
                    for (var i = 0; i < len; i++) {
                        arr[i] = binStr.charCodeAt(i);
                    }
                    callback(new Blob([arr], {
                        type: type || 'image/png'
                    }));
                });
            }
        });
    }
</script>
</body>
</html>
